<!--
 * @Description: 电影支付
 * @Author: Kerwin
 * @Date: 2025-04-27 17:30:11
 * @LastEditTime: 2025-05-30 12:01:39
 * @LastEditors:  Please set LastEditors
-->
<template>
  <view class="container">
    <!-- 展示提示信息 -->
    <van-notice-bar
      color="red"
      left-icon="volume-o"
      text="“重要提醒：本次所选座位未锁定，提交订单后请在 5 分钟内完成支付，避免座位被他人购走。”"
    />
    <!-- 勾选协议后显示 -->
    <view v-if="hasAgreed">
      <view class="top">
        <view class="ypbox">
          <view class="ypbox-l">
            <van-image width="100%" height="232rpx" :src="showObj.dytp" />
          </view>
          <view class="ypbox-r">
            <view class="nr">
              <view class="bt"> {{ showObj.dymc }} </view>
              <view class="xq">
                <view style="color: #ff6c18">{{ showObj.kcsj }}</view>
                <view>{{ showObj.yymc }}</view>
                <view>{{ showObj.ytmc }} </view>
                <view style="color: #19be6b">
                  {{ showObj.xzzw.map((ele) => ele.seatName).join(' ') }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="tsbox">
          <view style="margin-right: 30rpx">
            <u-icon name="info-circle" color="#D70208 " size="30"></u-icon
            ><text class="jcwz">不支持退票</text>
          </view>
          <view>
            <u-icon name="info-circle" color="#D70208 " size="30"></u-icon
            ><text class="jcwz">不支持改签</text>
          </view>
          <view class="hswz">
            <text class="text-button" @click="showXz = true">退改签须知</text>
          </view>
        </view>
      </view>
      <view class="middle">
        <view
          style="display: flex; justify-content: flex-end; margin-bottom: 20rpx"
        >
          <!-- 重新加载图标 -->
          <u-icon
            name="reload"
            size="40"
            @click="getOrderMoney"
            style="cursor: pointer"
          ></u-icon>
        </view>
        <view class="middle-b">
          <view>无座位时，接受系统调座</view>
          <view class="dhbox">
            <u-icon
              name="phone"
              color="#9D9D9D"
              size="28"
              style="margin-right: 10rpx"
            ></u-icon>

            <u-input
              trim
              show-confirmbar
              clearable
              placeholder="请输入手机号"
              v-model="phoneNum"
              type="number"
              @blur="handlePhoneBlur"
            />
          </view>
          <view class="hswz" style="font-size: 20rpx">手机号用于生成订单</view>
        </view>
        <view class="middle-t">
          <view>
            <view>购票</view>
            <view>￥{{ orderData.showTotal }}</view>
          </view>
          <view @click="showPop = true">
            {{ enumAll.SHOPMODEL[shopMode] }}
            <view>
              <text style="color: #d70208"> {{ discountMoney }}</text>
              <u-icon name="arrow-right"></u-icon
            ></view>
          </view>
          <view v-if="shopMode == 4 || shopMode == 6">
            <text>服务费</text>
            <view>￥{{ orderData.serviceMoney }}</view>
          </view>
          <view>
            <text style="color: #d70208; font-weight: bold"
              >已省￥{{ discountMoney }}</text
            >
            <view
              ><text style="color: #999; font-size: 20rpx"
                >共{{ showObj.xzzw.length }}张电影票，实付</text
              >
              <text style="font-weight: bold"
                >￥{{ orderData.payTotal }}</text
              ></view
            >
          </view>
          <view style="color: #999; margin-bottom: 0"
            >当前拥有的{{ enumAll.SHOPMODEL[shopMode] }}￥{{
              userHasTotalTicket
            }},最多可抵扣￥{{ canUseMaxDiscount }}
          </view>
          <!-- <view v-if="shopMode == 6">
            <view>
              可用来钡余额：
              <text style="color: red">￥{{ clBalance }}</text></view
            >
          </view> -->
        </view>
      </view>

      <view class="footer">
        <!-- <u-button @click="handleGoPassword">去密码</u-button> -->
        <!-- <u-button @click="handleGosuccess">去支付成功</u-button> -->
        <view class="footer-l">
          <view
            style="
              color: #ff6c18;
              font-size: 32rpx;
              margin-bottom: 10rpx;
              font-weight: bold;
            "
            >￥{{ orderData.payTotal }}</view
          >
          <!-- <view class="hswz" style="font-size: 20rpx"
            >总优惠￥{{ discountMoney }}</view
          > -->
        </view>
        <view class="footer-r">
          <!-- <u-button
            v-if="shopMode == 6"
            @click="openClBalance"
            type="success"
            shape="circle"
            style="margin-right: 20rpx"
            >来钡余额付款</u-button
          > -->
          <u-button type="primary" shape="circle" @click="handlePayBtn"
            >立即支付</u-button
          >
        </view>
      </view>
    </view>
    <!-- 复来券改变弹框 -->
    <u-popup
      v-model="showPop"
      border-radius="14"
      width="500rpx"
      mode="center"
      closeable
    >
      <view
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          height: 200rpx;
        "
        ><text>{{ enumAll.SHOPMODEL[shopMode] }}抵扣</text>
        <view>
          <van-stepper
            v-if="shopMode == 4 || shopMode == 6"
            v-model="discountMoney"
            input-width="150rpx"
            integer
            :min="0"
            :max="canUseMaxDiscount"
            :show-plus="false"
            :show-minus="false"
            @blur="handleFlqValChange"
            @plus="handleFlqValChange(canUseMaxDiscount + 1)"
            @minus="handleFlqValChange(canUseMaxDiscount - 1)"
          />
          <van-stepper
            v-if="shopMode == 1"
            v-model="discountMoney"
            input-width="150rpx"
            :decimal-length="1"
            :min="0"
            :max="canUseMaxDiscount"
            :show-plus="false"
            :show-minus="false"
            @blur="handleFlqValChange"
            @plus="handleFlqValChange(canUseMaxDiscount + 1)"
            @minus="handleFlqValChange(canUseMaxDiscount - 1)"
          /> </view
      ></view>
    </u-popup>
    <!-- 购票协议弹框 -->
    <view v-if="showAgreement" class="gpxybox">
      <view class="agreement-modal">
        <scroll-view scroll-y class="agreement-text">
          <view class="bt">购票服务协议须知</view>
          <view
            >1、购票成功后<text
              style="color: #d70208; font-size: 28rpx; font-weight: bold"
              >不支持退款，不支持改签！</text
            ></view
          >
          <view
            >2、点击同意本协议之前，请务必认真阅读、完全理解购票须知中全部条款。如点击同意后即代表您理解并接受协议的全部内容。</view
          >
          <view>
            3、如用户不同意接受本协议的任何条款，或无法理解本协议相关条款含义的，请不要进行后续操作(包括但不限于点击继续购票或继续使用平台服务等)。</view
          >
          <view> </view>
        </scroll-view>
        <view>
          <view class="agreement-checkbox">
            <u-checkbox-group>
              <u-checkbox
                v-model="isAgreed"
                style=""
                shape="circle"
              ></u-checkbox>
              <text style="font-size: 28rpx">我已阅读并同意协议</text>
            </u-checkbox-group>
          </view>
          <button
            :disabled="!isAgreed"
            class="select-btn"
            :class="{ 'disabled-btn': !isAgreed }"
            @click="confirmAgreement"
          >
            继续购票
          </button>
        </view>
      </view>
    </view>
    <!-- 退改签须知弹出框 -->
    <u-popup v-model="showXz" mode="bottom" height="400rpx" closeable="true">
      <view class="tpxybox">
        <view class="title">退改签须知</view>
        <view class="nr">
          <view>
            1.特惠购票成功后<text style="color: #d70208">不支持改签、退款</text
            >。</view
          >
          <!-- <view>
            2.付款后5-60分钟出票，若未能出票，请及时联系支付宝商家客服退款。</view
          > -->
          <view>
            2.出票成功后，在所选影院的自助取票或者前台取票即可。若无法取票，您可在订单页查看原图重新尝试取票。</view
          >
        </view>
      </view>
    </u-popup>
    <!-- 余额密码弹出框 -->
    <van-popup
      v-model:show="showYePay"
      position="bottom"
      round
      :style="{ height: '60%' }"
    >
      <view style="padding: 20rpx">
        <view style="text-align: center; margin-bottom: 20rpx"
          >请输入长来余额密码</view
        >
        <van-password-input
          :value="orderData.payPassword"
          info="密码为 6 位数字"
          :error-info="errorInfo"
          :focused="showKeyboard"
          @focus="showKeyboard = true"
        />
        <van-number-keyboard
          v-model="orderData.payPassword"
          :show="showKeyboard"
          @blur="showKeyboard = false"
        />
        <view>
          <u-button
            :disabled="
              !orderData.payPassword ||
              orderData.payPassword.length < 6 ||
              isPaying
            "
            type="success"
            style="margin: 20rpx 0"
            @click="handleClyePaySure"
            :loading="isPaying"
            loading-text="支付中..."
            >确认支付</u-button
          >
          <text @click="handleGoPassword" style="color: #007aff"
            >忘记密码？</text
          >
        </view>
      </view>
    </van-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import { movieApi, moneyApi, orderApi, userApi, enumAll } from '@/api'
import { storeToRefs } from 'pinia'
import debounce from 'lodash/debounce'
import { Decimal } from 'decimal.js'
import { browserVersion } from '@/utils/common'
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
import {
  IMovieInfo,
  ICinemaInfo,
  ISession,
  ISeat
} from '@/packageF/components/movieInterface'
import { useUserStore, useShopInfoStore } from '@/store'
import { Md5 } from 'ts-md5'
const userStore = useUserStore()
const shopStore = useShopInfoStore()
const shopInfoStore = useShopInfoStore()
const { accessToken, useShareCode } = storeToRefs(userStore)
// 是否展示改变复来券弹框
const showPop = ref(false)
const isApp = ref(false)
// 抵扣的金额
const discountMoney = ref(0)
// 用户拥有的总的复来券
const useTotalFulaiquan = ref(0)
// 用户拥有的总的花积分
const useTotalHuajifen = ref(0)
//  用户拥有的总的现金抵用券
const useToatlChanglaiQuan = ref(0)
//用户可使用的最大折扣
const canUseMaxDiscount = ref(0)
// 需要提交的订单数据
const orderData = ref<any>({})
// 手机号正则
const telReg = /^1[3-9]\d{9}$/
const phoneNum = ref('')
// 是否展示退票须知
const showXz = ref(false)
// 是否勾选协议
const isAgreed = ref(false)
// 是否显示协议弹窗
const showAgreement = ref(true)
// 是否已同意协议
const hasAgreed = ref(false)
const showObj = ref({
  // 影院名称
  yymc: '',
  // 电影名称
  dymc: '',
  // 电影图片
  dytp: '',
  // 开场时间
  kcsj: '',
  // 影厅名称
  ytmc: '',
  // 场次id
  ccid: '',
  cclx: '',
  // 是否分区定价
  isfq: 0,
  // 总的抵扣
  toatlMaxDk: 0,
  zwwz: '',
  // 选择的座位
  xzzw: [
    {
      seatId: '',
      seatName: ''
    }
  ]
})
// 模式类型
const shopMode = ref(JSON.parse(uni.getStorageSync('hyType')).id)
//存储用户支付密码
const payPassword = ref('')
const clBalance = ref(0)
const errorInfo = ref('')
// 是否显示余额密码弹出框
const showYePay = ref(false)
// 是否显示密码数字框
const showKeyboard = ref(true)
// 添加支付状态标志
const isPaying = ref(false) // 防止重复提交

// 页面加载时检查协议状态
onLoad(async () => {
  console.log('结算页shopMode', shopMode.value)
  isApp.value = shopStore.isApp
  phoneNum.value = userStore.userInfo.phone ? userStore.userInfo.phone : ''
  console.log('结算页面是否是app', isApp.value)
  checkAgreementStatus()
  // 判断是什么模式
  if (shopMode.value == 1) {
    await getMemberTotalHuajifen()
  } else if (shopMode.value == 4) {
    await getMemberTotalFulaiquan()
  } else if (shopMode.value == 6) {
    await getMemberTotalChangLaiQuan()
    await getMemberTotalShopMoneyChang()
  }
  showObj.value = JSON.parse(uni.getStorageSync('orderNeed'))
  //最大抵扣初始赋值
  canUseMaxDiscount.value = showObj.value.toatlMaxDk
})
onShow(() => {
  getUserDetailInfo()
})

//用户可使用的最大折扣
watch(canUseMaxDiscount, (newValue) => {
  // 如果用户拥有的总的券大于等于可使用的最大折扣,则discountMoney取值是可使用的最大折扣
  if (userHasTotalTicket.value >= newValue && newValue != null) {
    discountMoney.value = newValue
    canUseMaxDiscount.value = newValue
  } else {
    // 否则discountMoney取值的用户拥有的总的券
    discountMoney.value = userHasTotalTicket.value
    canUseMaxDiscount.value = userHasTotalTicket.value
  }
  getOrderMoney()
})

// 计算用户拥有的总的券
const userHasTotalTicket = computed(() => {
  switch (shopMode.value) {
    case 1:
      return useTotalHuajifen.value
    case 4:
      return useTotalFulaiquan.value
    case 6:
      return useToatlChanglaiQuan.value
    default:
      return 0
  }
})
// 获取用户总的现金抵用券
const getMemberTotalChangLaiQuan = async () => {
  const { data } = await moneyApi.getMemberSomeWalletMoney({
    walletRule: enumAll.wallet_rule_id_enum.现金抵用券
  })
  useToatlChanglaiQuan.value = Math.floor(data * 10) / 10
  // console.log(data, '用户拥有的总的现金抵用券')
}
// 获取用户总的复来券
const getMemberTotalFulaiquan = async () => {
  const { data } = await moneyApi.getMemberTotalFulaiquan()
  // console.log(data, '复来券')
  useTotalFulaiquan.value = data
}
// 获取用户总的花积分
const getMemberTotalHuajifen = async () => {
  const { data } = await moneyApi.getMemberSomeWalletMoney({
    walletRule: enumAll.wallet_rule_id_enum.花积分钱包
  })
  // console.log(data, '花积分')
  useTotalHuajifen.value = data
}
// 获取长来余额
const getMemberTotalShopMoneyChang = async () => {
  const { data } = await moneyApi.getMemberSomeWalletMoney({
    walletRule: enumAll.wallet_rule_id_enum.长来余额钱包
  })
  //向下取整保留两位小数
  clBalance.value = Math.floor((Number(data) || 0) * 100) / 100
  // console.log(data, '用户的长来余额钱包')
}
//订单数据
const getOrderMoney = async () => {
  if (!handleVerifyPhone()) {
    return
  }
  let shopProductSkuId = 0
  if (shopMode.value == 1) {
    shopProductSkuId = 87261
  } else if (shopMode.value == 4) {
    shopProductSkuId = 83481
  } else if (shopMode.value == 6) {
    shopProductSkuId = 89698
  }
  let obj = {
    orderProductSkus: showObj.value.xzzw.map((ele) => ({
      count: 1,
      shopProductSkuId,
      seatId: ele.seatId,
      otherStr: `{seatId:${ele.seatId},seatName:${ele.seatName}}`
    })),
    status: 0,
    scoreMoney: discountMoney.value,
    moneyUnit: '',
    contactNumber: phoneNum.value,
    integralsRuleId: 7,
    showId: showObj.value.ccid,
    addFlag: showObj.value.isfq,
    seatIds: showObj.value.xzzw.map((ele) => ele.seatId),
    shopIdType: shopMode.value
  }
  // console.log('创建money需要的数据', obj)
  uni.showLoading({ title: '折扣计算中请稍后', mask: true })
  try {
    const { data } = await orderApi.orderMoney(obj).finally(() => {
      uni.hideLoading()
    })
    const { otherMoney, payMoney, totalMoney } = data
    // console.log('fff', discountMoney.value, payMoney, totalMoney)
    orderData.value = { ...obj }
    orderData.value.serviceMoney = otherMoney
    orderData.value.payTotal = payMoney
    orderData.value.showTotal = totalMoney
    orderData.value.scoreMoney = discountMoney.value
    // console.log('获取ordermoney', data)
  } catch (e) {
    console.log('获取ordermoney错误', e)
  }
}
// 检查本地存储中的协议状态
const checkAgreementStatus = () => {
  const agreed = uni.getStorageSync('hasAgreedToProtocol')
  if (agreed) {
    hasAgreed.value = true // 已同意，直接显示支付页
  } else {
    showAgreement.value = true // 未同意，显示协议弹窗
  }
}
// 确认协议
const confirmAgreement = () => {
  if (!isAgreed.value) return
  // 存储同意状态
  uni.setStorageSync('hasAgreedToProtocol', true)
  hasAgreed.value = true
  showAgreement.value = false
}
// 验证手机号是否正确
const handlePhoneBlur = () => {
  if (phoneNum.value != '') {
    if (!telReg.test(phoneNum.value)) {
      uni.showToast({
        title: '请输入正确的手机号',
        icon: 'none'
      })
    }
  } else {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
  }
  orderData.value.contactNumber = phoneNum.value
}
//更改复来券抵扣
const handleFlqValChange = async (score?: any) => {
  // console.log('点击了', score)
  await getOrderMoney()
}
// 验证手机号是否为空和是否符合正则
const handleVerifyPhone = () => {
  // 检查是否为空
  if (!phoneNum.value) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return false
  }
  // 检查格式是否正确
  if (!telReg.test(phoneNum.value)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
    return false
  }
  return true
}
// 点击立即支付
const handlePayBtn = async () => {
  if (!handleVerifyPhone()) {
    return
  }
  // 从本地存储获取所选省市区
  let dqobj = JSON.parse(uni.getStorageSync('dqData'))
  //后续页面需要展示的数据
  const { yymc, dymc, dytp, kcsj, ytmc, zwwz, cclx } = showObj.value
  let tempObj = {
    cinemaName: yymc,
    movieName: dymc,
    showTime: kcsj,
    hallName: ytmc,
    showVersionType: cclx,
    seatsInfos: zwwz,
    posterUrl: dytp,
    ...dqobj,
    // 存储完整的影院信息，用于取票的导航功能
    code: uni.getStorageSync('cinemaData')
  }
  orderData.value.orderThirdParty = tempObj
  // console.log('创建订单准备数据==》', orderData.value)
  uni.showLoading({ title: '加载中', mask: true })
  try {
    const { data } = await orderApi.orderAdd(orderData.value).finally(() => {
      uni.hideLoading()
    })
    // console.log('orderAdd返回', data)
    if (data) {
      if (isApp.value) {
        const u = browserVersion()
        if (u.iPhone) {
          // @ts-ignore
          window.JSBridge.invoke('goPay', {
            orderId: data.id,
            money: data.payMoney
          })
          shopInfoStore.setIsApp(false)
          return
        } else if (u.isAndroid) {
          // @ts-ignore
          if (window?.Android) {
            // @ts-ignore
            window?.Android?.goPay(data.id, data.payMoney)
            shopInfoStore.setIsApp(false)
          }
          return
        }
      } else {
        location.href = `https://api.mylkjgs.com/?token=${accessToken.value}&orderId=${data.id}`
      }
    }
  } catch (e) {
    console.log('获取orderadd错误', e)
  }
}
//获取用户信息
const getUserDetailInfo = async () => {
  try {
    const { data } = await userApi.userInfo()
    // console.log('用户数据', data)
    // 是否有密码
    if (data.payPassword) {
      payPassword.value = data.payPassword
    } else {
      payPassword.value = ''
    }
  } catch (error) {
    console.error('获取用户信息失败', error)
  }
}
// 跳转密码
const handleGoPassword = () => {
  uni.reLaunch({
    url: `/pages/productCheckout/shopPayPwd?tzPage=3`
  })
}
// 长来余额支付成功跳转
const handleGosuccess = () => {
  // 跳转支付成功页面
  uni.reLaunch({
    url: `/pages/physicalShopCheck/clyePaySuccess?isSmfk=0`
  })
}
// 长来余额支付按钮
const openClBalance = () => {
  orderData.value.moneyUnit = '长来余额钱包'
  orderData.value.shopMode = 6
  if (payPassword.value == '') {
    uni.showModal({
      title: '提示',
      content:
        '您未设置支付密码，为确保支付安全需先设置一次支付密码，后续不会再设置',
      showCancel: true,
      success: ({ confirm, cancel }) => {
        if (confirm) {
          handleGoPassword()
        } else {
        }
      }
    })
    return
  }
  // 长来余额大于实付款
  if (Number(orderData.value.payMoney) < Number(clBalance.value)) {
    showYePay.value = true
  } else {
    uni.showToast({
      icon: 'error',
      title: '来钡余额不足！'
    })
  }
}
// 余额支付确认按钮
const handleClyePaySure = async () => {
  // 防止重复点击
  if (isPaying.value) return
  // 设置支付中状态
  isPaying.value = true
  // console.log(orderData.value, '支付的orderData数据')
  uni.showLoading({ title: '支付中请等候', mask: true })
  try {
    const { data, code, mes } = await orderApi
      .orderAdd({
        ...orderData.value,
        // 不能直接将加密的支付密码赋值给orderData的payPassword，这样回导致点击确认支付后无法再删除密码
        payPassword: Md5.hashStr(orderData.value.payPassword)
      })
      .finally(() => {
        uni.hideLoading()
        isPaying.value = false // 无论成功失败都重置状态
      })
    if (code == 200) {
      uni.showToast({
        icon: 'success',
        title: '购买成功！'
      })
      orderData.value.payPassword = ''
      showYePay.value = false
      // 跳转支付成功页面
      handleGosuccess()
    } else {
      orderData.value.payPassword = ''
      showYePay.value = false
      uni.showToast({
        icon: mes,
        title: '购买失败！'
      })
    }
  } catch (e) {
    orderData.value.payPassword = ''
    console.log('余额支付error', e)
    isPaying.value = false
  }
}
</script>

<style lang="scss" scoped>
.container {
  font-size: 24rpx;
  .top {
    width: 702rpx;
    height: 380rpx;
    background: #ffffff;
    border-radius: 8rpx;
    margin: 0 auto;
    padding: 20rpx;
    margin-top: 20rpx;
    margin-bottom: 30rpx;
    .ypbox {
      display: flex;
      align-items: center;
      margin-bottom: 50rpx;
      .ypbox-l {
        width: 162rpx;
        height: 232rpx;
        border: 1rpx solid #dbdbdbdb;
        border-radius: 5rpx;
        margin-right: 20rpx;
      }
      .ypbox-r {
        flex-grow: 1;
        height: 232rpx;
        display: flex;
        align-items: center;
        font-size: 24rpx;
        .nr {
          height: 100%;
          width: 0rpx;
          flex-grow: 1;
          margin-right: 20rpx;
          .bt {
            font-size: 32rpx;
            color: #000;
            font-weight: bold;
            margin-bottom: 10rpx;
          }
          .xq {
            > view {
              margin-bottom: 10rpx;
              color: #333;
            }
          }
        }
      }
    }
    .tsbox {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .middle {
    width: 702rpx;
    margin: 0 auto;
    overflow-y: scroll;
    height: 800rpx;
    .middle-t {
      padding: 20rpx;
      // height: 200rpx;
      border-radius: 8rpx;
      margin-bottom: 20rpx;
      background-color: #fff;
      font-size: 28rpx;
      color: #111;
      font-weight: 400;
      > view {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20rpx;
      }
    }
    .middle-b {
      padding: 20rpx;
      height: 202rpx;
      border-radius: 8rpx;
      background-color: #fff;
      margin-bottom: 20rpx;

      .dhbox {
        margin: 15rpx 0;
        width: 662rpx;
        height: 72rpx;
        background: #f4f6f7;
        display: flex;
        align-items: center;
        padding-left: 20rpx;
      }
    }
  }
  .footer {
    bottom: 0;
    position: fixed;
    width: 750rpx;
    height: 144rpx;
    border-radius: 10rpx;
    background: #ffffff;
    box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
  }
  .footer-r {
    display: flex;
    align-items: center;
  }
}

.jcwz {
  font-size: 24rpx;
  font-weight: bold;
  color: #000;
}
.hswz {
  color: #999;
}
.tpxybox {
  width: 750rpx;
  height: 590rpx;
  background: #ffffff;
  border-radius: 16rpx 16rpx 0rpx 0rpx;
  padding: 20rpx;
  .title {
    font-size: 40rpx;
    color: #333;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30rpx;
    margin-top: 20rpx;
  }
  .nr {
    line-height: 2;
    letter-spacing: 2rpx;
  }
}
.text-button {
  color: #999; /* 文字颜色（蓝色） */
  cursor: pointer; /* 鼠标悬停手型 */
  text-decoration: none; /* 默认无下划线 */
  transition: color 0.3s; /* 颜色过渡动画 */
}

/* 购票协议 */
.gpxybox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  .bt {
    font-size: 40rpx;
    font-weight: bold;
    text-align: center;
    color: #333;
    margin-bottom: 20rpx;
  }
  /* 协议弹窗 */
  .agreement-modal {
    width: 90%;
    max-height: 80vh;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  /* 协议文本区域 */
  .agreement-text {
    font-size: 24rpx;
    color: #333;
    line-height: 1.5;
    margin-bottom: 50rpx;
    letter-spacing: 3rpx;
  }
  // 选择按钮样式
  .select-btn {
    width: 564rpx;
    height: 84rpx;
    background: #ffb871;
    border-radius: 42rpx;
    font-size: 28rpx;
    line-height: 84rpx;
  }
  /* 禁用按钮样式 */
  .disabled-btn {
    width: 564rpx;
    height: 84rpx;
    background: #ffb871;
    border-radius: 42rpx;
    color: #999;
    font-size: 28rpx;
    line-height: 84rpx;
  }
  /* 复选框布局 */
  .agreement-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: center;
  }
}
</style>
